﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/layui/lib/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/layui/polyfill.min.js"></script>
    <script src="~/layui/vue.min.js"></script>
    <script src="~/layui/lib/index.js"></script>
    <style>
        .el-dialog__body {
            padding: 0 10px;
        }

        .el-table td {
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-button type="primary" icon="el-icon-plus" v-on:click="addDialog()">新增</el-button>
        <el-link type="primary" href="/ViewAuthorize/Index">首页</el-link>
        <el-table :data="CardInfoList" style="width: 100%;" highlight-current-row>
            <el-table-column prop="cardID" label="卡号" align="center"></el-table-column>
            <el-table-column prop="userName" label="用户名" align="center"></el-table-column>
            <el-table-column prop="userType" label="用户类型" align="center"></el-table-column>
            <el-table-column prop="credenceType" label="验证类型" align="center"></el-table-column>
            <el-table-column prop="elevatorAuthFloor" label="授权楼层" align="center"></el-table-column>
            <el-table-column prop="subDeviceID" label="子设备号" align="center"></el-table-column>
            <el-table-column label="开始时间" align="center">
                <template slot-scope="scope">
                    {{parseTime(scope.row.startTime,'{y}-{m}-{d}')}}
                </template>
            </el-table-column>
            <el-table-column label="结束时间" align="center">
                <template slot-scope="scope">
                    {{parseTime(scope.row.overTime,'{y}-{m}-{d}')}}
                </template>
            </el-table-column>
            <el-table-column prop="uuid" label="uuid" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" v-on:click="editDialog(scope.row)">编辑</el-button>
                    @*<el-button type="text" v-on:click="del(scope.row)">删除</el-button>*@
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="新增" :visible="addDialogVisible" width="50%" top="5vh" v-on:close="addCancel()">
            <el-form ref="addCardInfoRef" :model="addCardInfo" label-width="80px">
                <el-form-item label="卡号" prop="cardID">
                    <el-input v-model="addCardInfo.cardID"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="addCardInfo.userName"></el-input>
                </el-form-item>
                <el-form-item label="用户类型" prop="userType">
                    <el-input v-model="addCardInfo.userType"></el-input>
                </el-form-item>
                <el-form-item label="验证类型" prop="credenceType">
                    <el-input v-model="addCardInfo.credenceType"></el-input>
                </el-form-item>
                <el-form-item label="授权楼层" prop="elevatorAuthFloor">
                    <el-input v-model="addCardInfo.elevatorAuthFloor"></el-input>
                </el-form-item>
                <el-form-item label="子设备号" prop="subDeviceID">
                    <el-input v-model="addCardInfo.subDeviceID"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime">
                    <el-date-picker v-model="addCardInfo.startTime" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="overTime">
                    <el-date-picker v-model="addCardInfo.overTime" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="uuid" prop="uuid">
                    <el-input v-model="addCardInfo.uuid"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="saveCardInfo">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="编辑" :visible="editDialogVisible" width="50%" top="5vh" v-on:close="editCancel()">
            <el-form ref="editCardInfoRef" :model="editCardInfo" label-width="80px">
                <el-form-item label="卡号" prop="cardID">
                    <el-input v-model="editCardInfo.cardID"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="editCardInfo.userName"></el-input>
                </el-form-item>
                <el-form-item label="用户类型" prop="userType">
                    <el-input v-model="editCardInfo.userType"></el-input>
                </el-form-item>
                <el-form-item label="验证类型" prop="credenceType">
                    <el-input v-model="editCardInfo.credenceType"></el-input>
                </el-form-item>
                <el-form-item label="授权楼层" prop="elevatorAuthFloor">
                    <el-input v-model="editCardInfo.elevatorAuthFloor"></el-input>
                </el-form-item>
                <el-form-item label="子设备号" prop="subDeviceID">
                    <el-input v-model="editCardInfo.subDeviceID"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime">
                    <el-date-picker v-model="editCardInfo.startTime" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="overTime">
                    <el-date-picker v-model="editCardInfo.overTime" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="uuid" prop="uuid">
                    <el-input v-model="editCardInfo.uuid"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="updateCardInfo">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <script src="~/layui/jquery-3.3.1.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data:function () {
                return {
                    val: '123456',
                    CardInfoList: [],
                    addDialogVisible: false,
                    addCardInfo: {
                        cardID: '',
                        credenceType: '',
                        elevatorAuthFloor: '',
                        overTime: '',
                        startTime: '',
                        subDeviceID: '',
                        userName: '',
                        userType: '',
                        uuid: ''
                    },
                    editDialogVisible: false,
                    editCardInfo: {}
                }
            },
            created: function () {
                this.query()
            },
            methods: {
                query: function () {
                    var _this = this;
                    $.ajax({
                        url: '/api/CardInfo/GetAllVoucher',
                        type: 'post',
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function(res) {
                            console.log(res);
                            if (res.errcode !== 0) return _this.$message.error(res.errmsg)
                            _this.CardInfoList = res.data
                        }
                    })
                },
                addDialog: function () {
                    this.addDialogVisible = true
                },
                saveCardInfo: function () {
                    var _this = this;
                    this.$refs.addCardInfoRef.validate(function (valid) {
                        if (!valid) return false;
                        $.ajax({
                            url: '/api/CardInfo/InsertVoucherInfo',
                            type: 'post',
                            dataType: 'json',
                            data: JSON.stringify(_this.addCardInfo),
                            contentType: 'application/json',
                            success: function(res)  {
                                if (res.errcode !== 0) return _this.$message.error(res.errmsg)
                                _this.$message.success('新增成功')
                                _this.addDialogVisible = false
                                _this.query()
                            }
                        })
                    })

                },
                addCancel: function () {
                    this.$refs.addCardInfoRef.resetFields()
                    this.addDialogVisible = false
                },
                // 编辑
                editDialog: function (row) {
                    this.editCardInfo = row;
                    console.log(this.editCardInfo)
                    this.editDialogVisible = true
                },
                updateCardInfo: function () {
                    var _this = this;
                    this.$refs.editCardInfoRef.validate(function (valid) {
                        if (!valid) return false;
                        $.ajax({
                            url: '/api/CardInfo/UpdateVoucherByID',
                            type: 'post',
                            dataType: 'json',
                            data: JSON.stringify(_this.editCardInfo),
                            contentType: 'application/json',
                            success: function(res) {
                                if (res.errcode !== 0) return _this.$message.error(res.errmsg)
                                _this.$message.success('修改成功')
                                _this.editDialogVisible = false
                                _this.query()
                            }
                        })
                    })
                },
                editCancel: function () {
                    this.$refs.editCardInfoRef.resetFields()
                    this.editDialogVisible = false
                },
                // 删除
                del: function (row) {
                    var _this = this;
                    var confirmRes = this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '是',
                        cancelButtonText: '否',
                        type: 'warning'
                    }).then(function () {
                        $.ajax({
                            url: 'api/CardInfo/UpdateVoucherByID',
                            type: 'post',
                            dataType: 'json',
                            data: JSON.stringify(_this.editCardInfo),
                            contentType: 'application/json',
                            success: function (res) {
                                if (res.errcode !== 0) return _this.$message.error(res.errmsg)
                                _this.$message.success('修改成功')
                                _this.editDialogVisible = false
                                _this.query()
                            }
                        })
                    })
                    
                },
                // 格式化时间
                parseTime: function (time, cFormat) {
                    if (arguments.length === 0) {
                        return null
                    }
                    var format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
                    var date
                    if (typeof time === 'undefined' || time === null || time === 'null') {
                        return ''
                    } else if (typeof time === 'object') {
                        date = time
                    } else {
                        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
                            time = parseInt(time)
                        }
                        if ((typeof time === 'number') && (time.toString().length === 10)) {
                            time = time * 1000
                        }
                        date = new Date(time)
                    }
                    var formatObj = {
                        y: date.getFullYear(),
                        m: date.getMonth() + 1,
                        d: date.getDate(),
                        h: date.getHours(),
                        i: date.getMinutes(),
                        s: date.getSeconds(),
                        a: date.getDay()
                    }
                    var time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, function(result, key){
                        var value = formatObj[key]
                        // Note: getDay() returns 0 on Sunday
                        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
                        if (result.length > 0 && value < 10) {
                            value = '0' + value
                        }
                        return value || 0
                    })
                    return time_str
                }
            }
        })
    </script>

</body>
</html>